import React from "react";
import Link from "next/link";
import {ActionIcon, Group, Tooltip, Text, TextInput, Stack, Fieldset} from "@mantine/core";
import {modals} from "@mantine/modals";
import {notifications} from "@mantine/notifications";
import {IconCopy, IconEdit, IconLocation, IconTrash} from "@tabler/icons-react";
import {RecordProps} from "./interface";

// 若某一列渲染复杂，可单独拿出来
export function renderColumnAction(record: RecordProps) {
  return (
    <Group gap="xs" wrap="nowrap" justify="center">
      {/* [1] 进入按钮 */}
      <Tooltip label="进入方案" withArrow>
        <ActionIcon
          disabled={!record.accessable}
          size="sm"
          variant="light"
          color="teal"
          radius="xs"
          component={Link}
          href="/ipdv2/tools/relay-simulation/index"
        >
          <IconLocation size={16} />
        </ActionIcon>
      </Tooltip>

      {/* [2] 复制按钮 */}
      <Tooltip label="复制" withArrow>
        <ActionIcon
          disabled={!record.accessable}
          size="sm"
          variant="light"
          color="orange"
          radius="xs"
          onClick={() => {
            console.log(`点击了${record.name}这一行的复制按钮`);
            modals.openConfirmModal({
              title: "复制方案",
              children: (
                <Stack>
                  <Fieldset variant="filled" legend="原方案">
                    <TextInput label="方案版本" value="1.0" disabled />
                    <TextInput label="方案名称" value="考虑裂点+新增4局向" disabled />
                  </Fieldset>
                  <Fieldset legend="新方案">
                    <TextInput label="新方案版本" placeholder="请输入方案版本" withAsterisk />
                    <TextInput label="新方案名称" placeholder="请输入方案名称" withAsterisk />
                  </Fieldset>
                </Stack>
              ),
              labels: {confirm: "确定", cancel: "取消"},
              onCancel: () => console.log("Cancel"),
              onConfirm: () => {
                console.log("Confirmed");
                notifications.show({
                  color: "green",
                  title: "复制方案",
                  message: "方案复制成功",
                });
              },
            });
          }}
        >
          <IconCopy size={16} />
        </ActionIcon>
      </Tooltip>

      {/* [3] 编辑按钮 */}
      <Tooltip label="修改" withArrow>
        <ActionIcon
          disabled={!record.accessable}
          size="sm"
          variant="light"
          color="blue"
          radius="xs"
          onClick={() => {
            console.log(`点击了${record.name}这一行的编辑按钮`);
            modals.openConfirmModal({
              title: "编辑方案",
              children: (
                <Stack>
                  <TextInput label="方案版本" placeholder="请输入方案版本" />
                  <TextInput label="方案名称" placeholder="请输入方案名称" />
                </Stack>
              ),
              labels: {confirm: "确定", cancel: "取消"},
              onCancel: () => console.log("Cancel"),
              onConfirm: () => {
                console.log("Confirmed");
                notifications.show({
                  color: "green",
                  title: "编辑方案",
                  message: "方案编辑成功",
                });
              },
            });
          }}
        >
          <IconEdit size={16} />
        </ActionIcon>
      </Tooltip>

      {/* [4] 删除按钮 */}
      <Tooltip label="删除" withArrow>
        <ActionIcon
          disabled={!record.deletable}
          size="sm"
          variant="light"
          color="red"
          radius="xs"
          onClick={() => {
            console.log(`点击了${record.name}这一行的删除按钮`);
            modals.openConfirmModal({
              title: "删除方案",
              children: <Text size="sm">将删除该方案下所有数据，是否删除？</Text>,
              labels: {confirm: "删除", cancel: "取消"},
              confirmProps: {color: "red"},
              onCancel: () => console.log("Cancel"),
              onConfirm: () => {
                console.log("Confirmed");
                notifications.show({
                  color: "green",
                  title: "删除方案",
                  message: "方案删除成功",
                });
              },
            });
          }}
        >
          <IconTrash size={16} />
        </ActionIcon>
      </Tooltip>
    </Group>
  );
}
